<template>
  <span ref='countup'></span>
</template>

<script>
  import CountUp from 'countup.js';
  export default {
    name: 'count-up',
    data() {
      return {countUp: null};
    },
    props: {
      start: {
        type: Number,
        default: 0
      },
      end: {
        type: Number,
        default: 0
      },
      decimal: {
        type: Number,
        default: 0
      },
      duration: {
        type: Number,
        default: 2.5
      },
      options: {
        type: Object
      }
    },
    mounted() {
      this.initCountUp();
    },
    methods: {
      initCountUp() {
        const {start, end, decimal, duration, options} = this;
        this.countUp = new CountUp(this.$refs.countup, start, end, decimal, duration, options);
        this.countUp.start();
      }
    }
  }
  ;
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
